<!-- 温度统计 -->
<template>
  <div class="app-container" style="height:calc(100vh - 125px);">
    <el-card class="neiBox">
      <div>
        <el-form :model="search" size="mini" label-width="70px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="设备" prop="equipId">
                <el-select v-model="search.equipId" style="width: 100%">
                  <el-option v-for="item in eqAllList" :key="item.id" :label="`${item.equipName} ${item.equipCode ? '【' + item.equipCode + '】' : ''}`" :value="item.id">
                    <div @click="eqInfo(item)">
                      <span>{{ item.equipName }}</span>
                      <b style="font-weight: normal">{{ item.equipCode ? '【' + item.equipCode + '】' : '' }}</b>
                    </div>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="16" v-show="search.equipId">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="类型" prop="type">
                    <el-select v-model="search.type" @change="typeChange" style="width: 100%">
                      <el-option label="按天" :value="1" />
                      <el-option label="按区间" :value="2" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-show="search.type === 1">
                  <el-form-item label="日期" prop="startDate">
                    <el-date-picker v-model="search.startDate" @change="getTableInfo(1)" format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" style="width: 100%" placeholder="选择日期"></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-show="search.type === 2">
                  <el-form-item label="日期" prop="time">
                    <el-date-picker v-model="search.time" @change="getTableInfo(1)" style="width: 100%" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期时间" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="titleDiv">{{objInfo.equipName}}{{objInfo.equipCode ? '【' + objInfo.equipCode + '】' : ''}}温度统计</div>
      <div style="height: calc(100% - 90px);">
        <div id="eqLine" class="allWidthHeight" />
      </div>
    </el-card>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getEqListApi } from '@/api/public'
import { timeFormatToString } from '@/utils/function'
import * as echarts from 'echarts'
export default {
  components: {},
  data() {
    return {
      loading: false,
      search: {
        equipId: '',
        type: 1,
        endDate: '',
        startDate: '',
        time: []
      },
      eqAllList: [],
      myChart: null,
      objInfo: {}
    }
  },
  computed: {
    ...mapGetters(['compInfo'])
  },
  created() {},
  async mounted() {
    await this.getEqListAll()
    await this.getInfo()
    /* 根据浏览器收缩echarts重铸 */
    window.onresize = () => {
      this.infoSize()
    }
  },
  methods: {
    /* 前一天值 */
    getTimes() {
      var day1 = new Date()
      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
      var s1 =
        day1.getFullYear() + '-' + (day1.getMonth() + 1) + '-' + day1.getDate()
      return s1
    },
    /* 获取所有设备 */
    async getEqListAll() {
      const res = await getEqListApi()
      if (res?.data.code === 200) {
        this.eqAllList = res.data.data
      }
    },
    typeChange($event) {
      this.search.startDate = ''
      this.search.endDate = ''
      this.search.time = []
      if ($event === 1) {
        this.search.startDate = this.getTimes()
        this.getTableInfo()
      }
    },
    /* 设备选择 */
    async eqInfo(row) {
      this.search.equipId = row.id
      this.objInfo = row
      await this.getTableInfo()
    },
    async getInfo() {
      if (this.search.equipId === '') {
        this.objInfo = this.eqAllList[0]
        this.search.equipId = this.eqAllList[0].id
      }
      if (this.search.type === 1) this.search.startDate = this.getTimes()
      this.getTableInfo()
    },
    /**
     * @description: page
     * @param {*} page
     * @return {*}
     */
    async getTableInfo() {
      if (this.search.type !== 1) {
        const { time } = this.search
        if (time && time.length) {
          if (this.search.type === 3) {
            this.search.startDate =
              timeFormatToString(time[0]).slice(0, 7) + '-01'
            this.search.endDate =
              timeFormatToString(time[1]).slice(0, 7) + '-01'
          } else {
            this.search.startDate = time[0]
            this.search.endDate = time[1]
          }
        } else {
          this.search.startDate = ''
          this.search.endDate = ''
        }
      }
      this.loading = true
      const res = await this.$axios.post(
        '/energy/equip/energyTrend/current',
        this.search
      )
      if (res?.data.code === 200) {
        let obj = {
          time: [],
          num: []
        }
        if (res.data.data.dataList) {
          res.data.data.dataList.forEach((item) => {
            obj.time.push(item.dayKey)
            obj.num.push(item.data)
          })
        }
        this.setEqLine(obj)
        setTimeout(() => {
          this.loading = false
        }, 100)
      } else {
        this.loading = false
      }
    },
    infoSize() {
      this.myChart.resize()
    },
    setEqLine(data) {
      const option = {
        // tooltip: {
        //   trigger: 'axis',
        //   axisPointer: {
        //     type: 'cross',
        //     label: {
        //       backgroundColor: '#6a7985'
        //     }
        //   }
        // },
        tooltip: {
          trigger: 'axis',
          position: function (pt) {
            return [pt[0], '10%']
          }
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          data: data.time,
          splitLine: { show: false },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          scale: true,
          splitArea: {
            show: true
          },
          axisLine: {
            show: true,
            // 坐标轴 轴线
            lineStyle: {
              color: '#666',
              width: 1,
              type: 'solid'
            }
          },
          // splitLine: { show: false },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            color: '#666',
            formatter: '{value}'
          }
        },
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        series: [
          {
            data: data.num,
            type: 'line',
            smooth: true,
            symbol: 'none',
            // areaStyle: {}
            areaStyle: {
              color: {
                type: 'linear',
                x: 2,
                y: 2,
                x2: 2,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(157, 211, 232, 0.8)' // 渐变起始颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(0, 118, 252, 0)' // 渐变结束颜色（透明）
                  }
                ]
              }
            },
            // symbol: 'circle',
            // symbolSize: 10
            // smooth: true
            // smooth: 0.6,
            // symbol: 'none',
            // label: {
            //   show: true,
            //   color: '#333',
            //   position: 'top'
            // }
            lineStyle: {
              color: '#1891FF', // 这里设置为红色
              width: 1 // 设置线宽
            }
          }
        ]
      }
      if (
        this.myChart != null &&
        this.myChart !== '' &&
        this.myChart !== undefined
      ) {
        this.myChart.dispose() // 销毁
      }
      this.myChart = echarts.init(document.getElementById('eqLine'))
      this.myChart.clear()
      this.myChart.setOption(option, true)
    }
  }
}
</script>
<style lang='scss'>
.neiBox {
  height: 100%;
}
.neiBox .el-card__body {
  height: 100% !important;
}
.titleDiv {
  font-size: 18px;
  text-align: center;
  font-weight: bold;
}
</style>
